<template>
	<div class="news">
		<div class="newsImg">
			<div class="imgBox">
				<img src="../../../assets/images/manwei.jpg" alt="" />
			</div>
			<span>《复仇者联盟4》重要彩蛋全解析</span>
		</div>
		<div class="allImg">
			<div>
				<img src="../../../assets/images/climb.jpg" alt="" />
			</div>
			<div class="allImgTitle">
				<span class="titleSpan">小雀斑新片《热气球飞行家》独家..</span>
				<div>
					<span>12小时前</span>
					<span class="titleSpan2">评论3</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "news",
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/common.scss';
	.news{
		.newsImg{
			width: 100%;
			position: relative;
			.imgBox{
				img{
					width: 100%;
					height: vw(220);
				}
			}
			span{
				position: absolute;
				bottom: vw(0);
				width: 100%;
				height: vw(50);
				line-height: vw(50);
				font-size: vw(20);
				text-align: center;
				background: #000;
				color: #fff;
				background: rgba(0,0,0,.3);
			}
		}
		.allImg{
			width: 100%-vw(40);
			margin: vw(20);
			display: flex;
			border-bottom: 1px solid #ccc;
			>div{
				img{
					width: vw(90);
					height: vw(90);
				}
			}
			.allImgTitle{
				margin-left: vw(20);
				.titleSpan{
					display: block;
					font-size: vw(16);
				}
				>div{
					span{
						display: inline-block;
						padding-top: vw(20);
						font-size: vw(14);
						color: #999;
					}
					.titleSpan2{
						padding-left: vw(50);
					}
				}
			}
		}
	}
</style>
